<template>
  <div v-loading="isLoading">
    <div class="home-img" v-if="isShowPng">
      <img src="../../assets/image/home/welcome.png" alt="">
    </div>
    <div class="fast-menu-img" v-else>
      <el-row :gutter="12" v-for="(page, index) of defMenus" :key="index" >
        <el-col :span="4" v-for="(item, innerindex) of page">
          <div @click="open(item)" style="box-shadow: 0 4px 12px 0 rgb(134 162 210 / 20%);">
            <el-card shadow="hover" style="margin-bottom:20px;cursor:pointer;">
                <div v-if="item.icon!=null&&item.icon!=''" style="display: flex;" class="default-menu">
                  <i class="iconfont" :class="item.icon" v-if="item.icon && item.icon.substring(0, 2)!='el'" style="align-self: center;font-size: 25px;"></i>
                  <i :class="item.icon" v-else style="align-self: center;font-size: 25px;"></i>
                </div>
                <div v-else style="display: flex;" class="default-menu">
                  <i class="iconfont icon-app" style="align-self: center;font-size: 25px;"></i>
                </div>
                <div style="display: flex;margin-left: 10px;font-size: 20px;" class="default-menu">
                  <span style="align-self: center;">{{item.name}}</span>
                </div>
                <div style="margin-left: auto;">
                  <el-button icon="el-icon-close" circle style="border: 0px solid #DCDFE6;float: right;margin-top: -10px;padding: 3px;margin-right: -10px;" @click.stop="setDefault(item,$event)"></el-button>
                </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import MenuApi from "@/api/MenuApi";
export default {
  name: 'home',
  data() {
    return {
      defMenus:[],
      isShowPng:true,
      tempMenus:[],
      menuApi: new MenuApi(),
      clientId: process.env.VUE_APP_SSO_APP_ID,
      isLoading:false
    }
  },
  mounted(){
    this.getInit(this.$store.getters.defMenus,this.$store.getters.menus);
    this.fomatTemp()
  },
  watch: {
    "$store.getters.defMenus": {
      deep: true,
      handler: function (newValue) {
        this.isLoading = true
        this.tempMenus = []
        this.getInit(newValue,this.$store.getters.menus)
        this.fomatTemp()
        this.isLoading = false
      }
    }
  },
  methods: {
    setDefault(val,evt){
      this.isLoading = true
      this.menuApi.deleteDefaultMenu({menuId:val.id,clientId:this.clientId}).then(res=>{
        let defaultMenus = this.$store.getters.defMenus
        var index = defaultMenus.indexOf(val.id);
        if (index > -1) {
          defaultMenus.splice(index, 1);
          this.$store.dispatch('setDefaultMenus',defaultMenus)
        }
        this.isLoading = false
        let target = evt.target;
        if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
          target = evt.target.parentNode;
        }
        target.blur();
      })
    },
    getInit(newValue,menus){
      if(newValue!=null&&newValue.length>0){
        for(var i=0;i<menus.length;i++){
          if(newValue.indexOf(menus[i].id)!=-1){
            this.tempMenus.push(menus[i])
          }
          if(menus[i].children&&menus[i].children.length>0){
            this.getInit(newValue,menus[i].children)
          }
        }
      }
    },
    fomatTemp(){
      this.defMenus = []
      this.tempMenus.forEach((item, index) => {
        const page = Math.floor(index / 6)
        if (!this.defMenus[page]) {
          this.defMenus[page] = []
        }
        this.defMenus[page].push(item)
      })
      if(this.tempMenus.length>0){
        this.isShowPng = false
      }else{
        this.isShowPng = true
      }
    },
    open(item) {
      let reqUrl = item.code;
      if(item.openType == 1){
        if (item.url.indexOf("http") != -1 || item.url.indexOf("https") != -1) {
          reqUrl = `/myiframe/urlPath?src=${reqUrl}&name=${item.name}`;
        }
        this.$router.push({
          path: reqUrl,
          query: item.query
        })
      }else {
        let routeUrl = this.$router.resolve({
          path: reqUrl,
          query: item.query
        });
        window.open(routeUrl.href, '_blank');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home-img{
  width: 100%;
  height: 100%;
  background: #fff;
  padding-top: 200px;
  img{
    display: block;
    margin: 0px auto;
  }
}
.fast-menu-img{
  width: 100%;
  height: 100%;
}
/deep/ .el-card__body {
  padding: 15px;
  display: flex;
  height: 120px;
}
</style>
